<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/css1.css">
    <link rel="stylesheet" type="text/css" href="css/项目2.css">
</head>
<script type="text/javascript">
	window.onload=function(){
		test_one = document.getElementById('test_one');
		test_two = document.getElementById('test_two');
		img1 = document.getElementById('img1');
		img1.onmouseover = function(){
			test_one.style.display = "block";
			test_two.style.display = "block";
		}
		img1.onmouseout = function(){
			test_one.style.display = "none";
			test_two.style.display = "none";
		}
		test_thr = document.getElementById('test_thr');
		test_four = document.getElementById('test_four');
		img2 = document.getElementById('img2');
		img2.onmouseover = function(){
			test_thr.style.display = "block";
			test_four.style.display = "block";
		}
		img2.onmouseout = function(){
			test_thr.style.display = "none";
			test_four.style.display = "none";
		}
		test_five = document.getElementById('test_five');
		test_six = document.getElementById('test_six');
		img3 = document.getElementById('img3');
		img3.onmouseover = function(){
			test_five.style.display = "block";
			test_six.style.display = "block";
		}
		img3.onmouseout = function(){
			test_five.style.display = "none";
			test_six.style.display = "none";
		}
		gyx_imgs = document.getElementsByClassName('img');
		test_on = document.getElementById('test_on');
		test_tw = document.getElementById('test_tw');

		test_on1 = document.getElementById('test_on1');
		test_tw1 = document.getElementById('test_tw1');

		test_on2 = document.getElementById('test_on2');
		test_tw2 = document.getElementById('test_tw2');

		test_on3 = document.getElementById('test_on3');
		test_tw3 = document.getElementById('test_tw3');

		console.log(gyx_imgs);
				
			gyx_imgs[0].onmouseover = function(){
			test_on.style.display = "block";
			test_tw.style.display = "block";
		}
		gyx_imgs[0].onmouseout = function(){
			test_on.style.display = "none";
			test_tw.style.display = "none";
		}

		gyx_imgs[1].onmouseover = function(){
			test_on1.style.display = "block";
			test_tw1.style.display = "block";
		}
		gyx_imgs[1].onmouseout = function(){
			test_on1.style.display = "none";
			test_tw1.style.display = "none";
		}

		gyx_imgs[2].onmouseover = function(){
			test_on2.style.display = "block";
			test_tw2.style.display = "block";
		}
		gyx_imgs[2].onmouseout = function(){
			test_on2.style.display = "none";
			test_tw2.style.display = "none";
		}

		gyx_imgs[3].onmouseover = function(){
			test_on3.style.display = "block";
			test_tw3.style.display = "block";
		}
		gyx_imgs[3].onmouseout = function(){
			test_on3.style.display = "none";
			test_tw3.style.display = "none";
		}

		test_one1 = document.getElementById('test_one1');
		test_two1 = document.getElementById('test_two1');
		img11 = document.getElementById('img11');
		img11.onmouseover = function(){
			test_one1.style.display = "block";
			test_two1.style.display = "block";
		}
		img11.onmouseout = function(){
			test_one1.style.display = "none";
			test_two1.style.display = "none";
		}
		test_thr1 = document.getElementById('test_thr1');
		test_four1 = document.getElementById('test_four1');
		img22 = document.getElementById('img22');
		img22.onmouseover = function(){
			test_thr1.style.display = "block";
			test_four1.style.display = "block";
		}
		img22.onmouseout = function(){
			test_thr1.style.display = "none";
			test_four1.style.display = "none";
		}
		test_five1 = document.getElementById('test_five1');
		test_six1 = document.getElementById('test_six1');
		img33 = document.getElementById('img33');
		img33.onmouseover = function(){
			test_five1.style.display = "block";
			test_six1.style.display = "block";
		}
		img33.onmouseout = function(){
			test_five1.style.display = "none";
			test_six1.style.display = "none";
		}
	}
	
</script>
<body>
<!-- 头部开始 -->
<div class="header">
	<div class="top">
		<div class="nav">
			<span><img src="images/logo_midila.png"></span>
				<ul>
					<li><a href="">首页</a></li>
					<li><a href="">分类</a></li>
					<li><a href="">客片</a></li>
					<li><a href="">报价</a></li>
					<li><a href="">微视屏</a></li>
					<li><a href="">品牌介绍</a></li>
					<li><a href="">客服</a></li>
				</ul>
		</div>
	</div>
</div>
<!-- 头部结束 -->
<div class="gyx_logo"><!-- 中间上开始 -->
	<img src="images/xiangmu1.png" width="1920" height="800">
	<p>作品展示</p>
</div><!-- 中间上结束 -->
<div class="gyx_pic1"><!-- 中间1开始 -->
	<div>
	<img id="img1" src="images/xiangmu2.png" width="658" height="658">
	<div id="test_one" class="test_one"></div>
	<span id="test_two" class="test_two">立即预定</span>
	</div>
	<div>
	<img id="img2" class="pic_one" src="images/xiangmu2.png" width="658" height="658">
	<div id="test_thr" class="test_one"></div>
	<span id="test_four" class="test_four">立即预定</span>
	</div>
	<div>
	<img id="img3" class="pic_two" src="images/xiangmu3.png" width="1330" height="600">
	<div id="test_five" class="test_five"></div>
	<span id="test_six" class="test_six">立即预定</span>
	</div>
</div><!-- 中间1结束 -->
<div class="gyx_pic2">
	<hr class="hr1" noshade size="1" width="68.5">
	<img src="images/logo_m.png" width="131" height="24">
	<hr class="hr2" noshade size="1" width="68.5">
	<p><img src="images/xiangmu7.png" width="40" height="110"></p>
</div>
<div id="gyx_pic3" class="gyx_pic3"><!-- 中间2开始 -->
	<img class="pic3_one" src="images/xiangmu8.png" width="400" height="40">
	<p>作品展示</p>
	<div id="gyx_imgs" class="gyx_imgs">
		<div class="pic3_two gyx_on"><img class="img" src="images/xiangmu4.png" width="658" height="658">
		<div id="test_on" class="test_on"></div>
		<span id="test_tw" class="test_tw">立即预定</span>
		</div>
		<div  class="pic3_thr gyx_on"><img class="img" src="images/xiangmu4.png" width="658" height="658">
		<div id="test_on1" class="test_on"></div>
		<span id="test_tw1" class="test_tw">立即预定</span>	
		</div>	
		<div  class="pic3_four gyx_on"><img  class="img" src="images/xiangmu4.png" width="658" height="658">
		<div id="test_on2" class="test_on"></div>
		<span id="test_tw2" class="test_tw">立即预定</span>
		</div>	
		<div class="pic3_five gyx_on"><img class="img" src="images/xiangmu4.png" width="658" height="658">
		<div id="test_on3" class="test_on"></div>
		<span id="test_tw3" class="test_tw">立即预定</span>
		</div>
	</div>
</div><!-- 中间2结束 -->
<div class="gyx_pic4">
	<img src="images/logo_midilaxiao1.png" width="400" height="24">
	<p><img src="images/xiangmu7.png" width="40" height="110"></p>
</div>
<div class="gyx_pic1"><!-- 中间3开始 -->
	<img class="pic3_one" src="images/xiangmu9.png" width="450" height="40">
	<p>作品展示</p>
	<div>
	<img id="img11" src="images/xiangmu2.png" width="658" height="658">
	<div id="test_one1" class="test_one1"></div>
	<span id="test_two1" class="test_two1">立即预定</span>
	</div>
	<div>
	<img id="img22" class="pic_one" src="images/xiangmu2.png" width="658" height="658">
	<div id="test_thr1" class="test_one1"></div>
	<span id="test_four1" class="test_four1">立即预定</span>
	</div>
	<div>
	<img id="img33" class="pic_two" src="images/xiangmu3.png" width="1330" height="600">
	<div id="test_five1" class="test_five1"></div>
	<span id="test_six1" class="test_six1">立即预定</span>
	</div>
</div><!-- 中间3结束 -->
<div class="gyx_pic5"><!-- 中间4开始 -->
	<div class="gyx_left">
		<button>联系我们</button>
		<p>
		<input class="input_one" type="text" name="姓名" value="姓名:">
		<input class="input_two" type="text" name="年龄" value="年龄:">
		</p>
		<p><input class="input_thr" type="text" name="您的愿望" value="您的愿望:"></p>
		<p><button>提交</button></p>
	</div>
	<div class="gyx_right">
		<img src="images/xiangmu5.png" width="650" height="310">
	</div>
</div><!-- 中间4结束 -->
<div class="gyx_bottom"><!-- 底部开始 -->
	<img class="bottom_pic1" src="images/xiangmu9.png" width="450" height="40">
	<img class="bottom_pic2" src="images/xiangmu6.png" width="1920" height="800">
</div><!-- 底部结束 -->
</body>
</html>